<!--
 * @Author: YNT 2501512800@qq.com
 * @Date: 2022-06-26 22:22:21
 * @LastEditors: YNT 2501512800@qq.com
 * @LastEditTime: 2022-09-29 03:11:01
 * @FilePath: \智慧社区的副本\src\views\basic-data\operation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container" v-loading="isLoading">
    <el-card :key="isKey">
      <el-table :data="tableData" border>
        <el-table-column prop="nick_name" label="用户名称" />
        <el-table-column prop="message" label="操作详情" show-overflow-tooltip/>
        <el-table-column prop="ip" label="ip地址" show-overflow-tooltip />
        <el-table-column prop="update_time" label="操作时间" />
      </el-table>
    </el-card>
    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.per_page"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>
  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit, status } from "@/utils/mixins";
export default {
  mixins: [table, addOrEdit, status],
  data: () => ({
    isLoading: true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    searchForm:{
      page:1,
      per_page:10,
    }
  }),
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList(){
      API.getOperation(this.searchForm).then(({data})=>{
        this.tableData=data.items
        this.tableTotal=data.total
      })
    },
    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },
  },
};
</script>

<style lang="scss" scoped></style>



